{% extends "wltheme/accounts/account_form.html" %}
{% load i18n wenlincms_tags wlcore_tags %}

{% block meta_title %}{{ title }}{% endblock %}
{% block title %}{{ title }}{% endblock %}
{% block body_id %}account{% endblock %}

{% block breadcrumb_menu %}{% endblock %}

{% block wlmain %}class="wlmain reg_maincontain"{% endblock %}

{% block main %}
    <div class="reg_content">
        <div class="am-fl log_showfourmes">
            <div class="am-fl log_mes log_mesone">
                <i class="am-icon-btn am-primary am-icon-hdd-o am-fl log_icons"></i>
                <dl>千万级企业资源库</dl>
                <p>多维度产业数据，洞察企业全景<br>多层级数据采集，挖掘信息深度价值
                </p>
            </div>
            <div class="am-fl log_mes log_mestwo">
                <i class="am-icon-btn am-warning am-icon-steam am-fl log_icons"></i>
                <dl>需求智能匹配系统</dl>
                <p>智能产业链标签，供需精准、主动推送<br>准确定位用户个性化需求
                </p>
            </div>
            <div class="am-fl log_mes log_mesthree">
                <i class="am-icon-btn am-danger am-icon-users am-fl log_icons"></i>
                <dl>大数据人脉对接分析</dl>
                <p>基于大数据构建人脉网络<br>商务语境下的产业服务社交平台
                </p>
            </div>
            <div class="am-fl log_mes log_mesfour">
                <i class="am-icon-btn am-success am-icon-shield am-fl log_icons"></i>
                <dl>企业真实业务认证</dl>
                <p>确保供需真实有效<br>承担安全监管职责，避免商业欺诈行为
                </p>
            </div>
        </div>
        <div class="am-fr am-panel-bd am-panel reg-container">
            <form method="post" class="am-form am-form-horizontal reg-form" id="reg_inputforms" doing="0"
                  action="/accounts/signup/">
                {% csrf_token %}
                <div class="am-input-group reg_inpmes">
                    <span class="am-input-group-label">
                        <i class="am-icon-mobile am-icon-md  am-icon-fw reg_icons"></i></span>
                    <input type="text" name="phone" id="id_phone" class="am-form-field" placeholder="请输入手机号码或邮箱"
                           required="true" onblur="JudgeTelephone();">
                </div>
                <div class="reg_errors phones"></div>

                <div class="reg_inpcode">
                    <div class="am-input-group reg_inpmes">
                  <span class="am-input-group-label">
                    <i class="am-icon-pencil am-icon-sm am-icon-fw reg_icons" id="reg_phoneicon"></i></span>
                        <input type="text" name="code" id="id_code" class="am-form-field" placeholder="验证码"
                               required="true">
                    </div>
                </div>
                <div class="am-fr">
                    <input type="button" value="点击获取验证码" id="btnSendCode" onclick="codeVerify()"
                           class="am-btn am-btn-primary ">
                </div>
                <div class="reg_errors codes">
                </div>
                <div class="am-input-group reg_inpmes">
                 <span class="am-input-group-label">
                    <i class="am-icon-user am-icon-sm am-icon-fw reg_icons"></i></span>
                    <input type="text" name="username" id="id_username" class="am-form-field"
                           placeholder="请输入用户名（只能输入字母或数字）"
                           required="true"
                           onblur="JudgeUserName()">
                </div>
                <div class="reg_errors usernames">
                </div>

                <div class="am-input-group reg_inpmes">
                   <span class="am-input-group-label">
                    <i class="am-icon-lock am-icon-sm am-icon-fw reg_icons"></i></span>
                    <input type="password" name="password1" id="id_password1" class="am-form-field" placeholder="请输入密码"
                           required="true">
                </div>
                <div class="reg_errors"></div>
                <div class="am-input-group reg_inpmes">
                   <span class="am-input-group-label">
                    <i class="am-icon-lock am-icon-sm am-icon-fw reg_icons"></i></span>
                    <input type="password" name="password2" id="id_password1" class="am-form-field"
                           placeholder="请再次输入密码" required="true">
                </div>
                <div class="reg_errors password2s">
                </div>
                <div class="accounts">
                </div>
                <div class="am-form-group reg_btnregst">
                    <button type="submit" class="am-btn am-btn-primary" style="width: 100%">
                        <i class="am-icon-refresh am-icon-spin wl-hidden" style="font-size: 12px"></i>
                        &nbsp;注册
                    </button>
                </div>
                <div class="am-form-group reg_gotologin">
                    <span>已有账号?&nbsp;<a href="/accounts/login/">直接登录</a></span>
                </div>
            </form>
        </div>
    </div>
    <div class="am-modal am-modal-alert" tabindex="-1" id="signup_sucess">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">注册成功</div>
            <div class="am-modal-bd">
                恭喜您注册成功，请进行登录。
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-confirm>确定</span>
            </div>
        </div>
    </div>
    <div class="am-modal am-modal-prompt" tabindex="-1" id="random_code">
        <div class="am-modal-dialog">
            <div class="am-modal-bd">
                <form method="post" class="am-form am-form-horizontal" id="random_code_form">
                    {% csrf_token %}
                    <div class="am-input-group " style="width:60%;margin-left:70px;margin-top:30px">
                        <input required type="text" name="captcha_1" id="id_captcha_1" class="am-form-field"
                               placeholder="请输入验证码" maxlength="4"
                               required="true" style="width: 65%"/>

                        <div style="float:right;" id='captcha'>
                            {{ random_code.captcha }}
                        </div>
                    </div>
                    <div>
                        <input id="random_code_verify_btn" style="display:none;" type="submit" value="进行验证"/>
                    </div>
                </form>
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>提交</span>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{{ STATIC_URL }}{{ "wltheme/js/jquery.validate.js"|file_time_stamp }}"></script>
    <script src="{{ STATIC_URL }}{{ "wltheme/js/account/signVerify.js" }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#captcha").children("#id_captcha_1").remove();
        });
        $(".captcha").click(function () {
            var url = "/captcha/refresh";
            $.getJSON(url, {}, function (json) {
                // This should update your captcha image src and captcha hidden input
                $('#id_captcha_0').attr("value", json.key);
                $(".captcha").attr("src", json.image_url);
            });
        });
        var SignupForm = $('form#reg_inputforms');
        SignupForm.submit(function () {
            if ($('form#reg_inputforms').attr('doing') == '0') {
                $('form#reg_inputforms i').removeClass("wl-hidden");
                $('form#reg_inputforms').attr('doing', '1');
                $.ajax({
                    type: 'POST',
                    url: SignupForm.attr('action'),
                    data: SignupForm.serialize(),
                    success: function (response) {
                        if (response['status'] == 1) {
                            $(".password2s").text("注册成功！！").css("color", "#222");
                            setInterval('location.href = "/accounts/login/"', 3000);
                        }
                        else {
                            $('form#reg_inputforms i').addClass("wl-hidden");
                            $('form#reg_inputforms').attr('doing', '0');
                            if (response['status']['phone']) {
                                $(".phones").text(response['status']['phone']);
                            }
                            if (response['status']['code']) {
                                $(".codes").text(response['status']['code']);
                            }
                            if (response['status']['account']) {
                                $(".accounts").text(response['status']['account']);
                            }
                            if (response['status']['password2']) {
                                $(".password2s").text(response['status']['password2']);
                            }
                            if (response['status']['username']) {
                                $(".usernames").text(response['status']['username']);
                            }
                        }
                    },
                    error: function (response) {
                        alert("网络异常");
                    }
                });
                return false;
            }
            else {
                return false;
            }
        });
        function JudgeUserName() {
            var username = document.getElementById("id_username").value;
            url = "/accounts/judgeUsername";
            $.getJSON(url, {'username': username}, function (json) {
                if (json.uExist == 1) {
                    $(".usernames").text("用户已经存在")
                }
                else {
                    $(".usernames").text("")
                }
            });
        }
        function JudgeTelephone() {
            var telephone = document.getElementById("id_phone").value;
            if (telephone != "") {
                url = "/accounts/judgePhone";
                $.getJSON(url, {'telephone': telephone}, function (json) {
                    if (json.tExist == 1) {
                        $(".phones").text("用户已经存在")
                        $("#btnSendCode").attr("disabled", true)
                    }
                    else {
                        $(".phones").text("")
                        $("#btnSendCode").attr("disabled", false)
                    }
                });
            }
        }
    </script>
{% endblock %}
